
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <title>Markers Layer Example</title> 
    <link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.10/theme/default/style.css" type="text/css" /> 
    <script src="http://openlayers.org/api/OpenLayers.js"></script> 
    <script type="text/javascript"> 
        var map, layer;
 
        function init(){
            OpenLayers.ProxyHost="/proxy/?url=";
            map = new OpenLayers.Map('map');
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
                "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
                
            map.addLayer(layer);
            map.setCenter(new OpenLayers.LonLat(0, 0), 0);
 
            //var newl = new OpenLayers.Layer.Text( "text", { location:"./textfile.txt"} );
            //map.addLayer(newl);
 
            var markers = new OpenLayers.Layer.Markers( "Markers" );
            map.addLayer(markers);
 
            var size = new OpenLayers.Size(21,25);
            var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
            var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
            markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
 
            /*var halfIcon = icon.clone();
            markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,45),halfIcon));
 
            marker = new OpenLayers.Marker(new OpenLayers.LonLat(90,10),icon.clone());
            marker.setOpacity(0.2);
            marker.events.register('mousedown', marker, function(evt) { alert(this.icon.url); OpenLayers.Event.stop(evt); });
            markers.addMarker(marker); */
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.zoomToMaxExtent();
 
//            halfIcon.setOpacity(0.5);
        }
    </script> 
  </head> 
  <body onload="init()"> 
    <h1 id="title">Markers Layer Example</h1> 
    <div id="tags">Marker, event, mousedown, popup, inco</div> 
    <div id="shortdesc">Show markers layer with different markers</div> 
    <div id="map" class="smallmap"></div> 
    <div id="docs"> 
        This is an example of an OpenLayers.Layers.Markers layer that shows some examples of adding markers.  Also demonstrated is registering a mousedown effect on a marker.
    </div> 
  </body> 
</html> 
